<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理 - AI面试助手</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <!-- Bootstrap Icons -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        /* 全局样式变量 */
        :root {
            --primary-color: #4e73df;
            --primary-hover: #2e59d9;
            --success-color: #1cc88a;
            --danger-color: #e74a3b;
            --warning-color: #f6c23e;
            --info-color: #36b9cc;
            --text-color: #333;
            --text-muted: #6c757d;
            --bg-light: #f8f9fa;
            --white: #ffffff;
            --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
            --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
            --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
            --border-radius: 8px;
            --transition: all 0.3s ease;
        }
        
        /* 基础样式 */
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background-color: var(--bg-light);
            color: var(--text-color);
            line-height: 1.6;
            min-height: 100vh;
            margin: 0;
            display: flex;
            flex-direction: column;
        }
        
        /* 头部样式 */
        header {
            background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
            color: var(--white);
            padding: 1.5rem 0;
            box-shadow: var(--shadow-md);
        }
        
        header h1 {
            margin: 0;
            font-weight: 700;
            font-size: 1.8rem;
            display: flex;
            align-items: center;
        }
        
        header h1 i {
            margin-right: 0.75rem;
            font-size: 1.5rem;
        }
        
        /* 主内容区 */
        main {
            flex: 1;
            padding: 2rem 0;
        }
        
        /* 卡片样式 */
        .card {
            border: none;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-sm);
            overflow: hidden;
            transition: var(--transition);
        }
        
        .card:hover {
            box-shadow: var(--shadow-md);
        }
        
        .card-header {
            background-color: var(--white);
            border-bottom: 1px solid #e9ecef;
            padding: 1.25rem 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .card-header h2 {
            margin: 0;
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--text-color);
        }
        
        .card-body {
            padding: 1.5rem;
        }
        
        /* 搜索筛选区域 */
        .search-filter {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            margin-bottom: 1.5rem;
        }
        
        .search-input {
            flex: 1;
            min-width: 250px;
            position: relative;
        }
        
        .search-input input {
            width: 100%;
            padding: 0.75rem 1rem 0.75rem 2.5rem;
            border: 2px solid #e9ecef;
            border-radius: var(--border-radius);
            transition: var(--transition);
        }
        
        .search-input input:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(78, 115, 223, 0.1);
        }
        
        .search-input i {
            position: absolute;
            left: 1rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-muted);
        }
        
        .filter-select {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            align-items: center;
        }
        
        .filter-select select {
            padding: 0.75rem 1rem;
            border: 2px solid #e9ecef;
            border-radius: var(--border-radius);
            background-color: var(--white);
            cursor: pointer;
            transition: var(--transition);
        }
        
        .filter-select select:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(78, 115, 223, 0.1);
        }
        
        /* 表格样式 */
        .table-responsive {
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }
        
        .table {
            margin-bottom: 0;
            width: 100%;
        }
        
        .table thead {
            background-color: var(--bg-light);
        }
        
        .table th {
            padding: 1rem 1.25rem;
            font-weight: 600;
            color: var(--text-color);
            border-bottom: 2px solid #e9ecef;
            text-align: left;
        }
        
        .table td {
            padding: 1rem 1.25rem;
            vertical-align: middle;
            border-bottom: 1px solid #e9ecef;
        }
        
        .table tbody tr {
            transition: var(--transition);
        }
        
        .table tbody tr:hover {
            background-color: rgba(78, 115, 223, 0.03);
            transform: translateY(-1px);
        }
        
        /* 状态标签 */
        .status-badge {
            padding: 0.35rem 0.75rem;
            border-radius: 20px;
            font-weight: 500;
            font-size: 0.875rem;
            text-align: center;
            display: inline-block;
        }
        
        .status-active {
            background-color: rgba(28, 200, 138, 0.1);
            color: var(--success-color);
            border: 1px solid rgba(28, 200, 138, 0.2);
        }
        
        .status-inactive {
            background-color: rgba(231, 74, 59, 0.1);
            color: var(--danger-color);
            border: 1px solid rgba(231, 74, 59, 0.2);
        }
        
        /* 按钮样式 */
        .btn {
            padding: 0.5rem 1rem;
            border-radius: var(--border-radius);
            font-weight: 500;
            transition: var(--transition);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.25rem;
            border: none;
        }
        
        .btn-primary {
            background-color: var(--primary-color);
            color: var(--white);
        }
        
        .btn-primary:hover {
            background-color: var(--primary-hover);
            transform: translateY(-1px);
        }
        
        .btn-success {
            background-color: var(--success-color);
            color: var(--white);
        }
        
        .btn-success:hover {
            background-color: #17a673;
            transform: translateY(-1px);
        }
        
        .btn-danger {
            background-color: var(--danger-color);
            color: var(--white);
        }
        
        .btn-danger:hover {
            background-color: #c72c1c;
            transform: translateY(-1px);
        }
        
        .btn-warning {
            background-color: var(--warning-color);
            color: var(--white);
        }
        
        .btn-warning:hover {
            background-color: #e3a008;
            transform: translateY(-1px);
        }
        
        .btn-outline-primary {
            border: 2px solid var(--primary-color);
            color: var(--primary-color);
            background-color: transparent;
        }
        
        .btn-outline-primary:hover {
            background-color: var(--primary-color);
            color: var(--white);
            transform: translateY(-1px);
        }
        
        .btn-group .btn {
            margin-right: 0.5rem;
        }
        
        .btn-group .btn:last-child {
            margin-right: 0;
        }
        
        /* 分页样式 */
        .pagination {
            display: flex;
            justify-content: center;
            margin-top: 2rem;
            padding: 0;
        }
        
        .pagination .page-item {
            margin: 0 0.25rem;
        }
        
        .pagination .page-link {
            padding: 0.5rem 0.75rem;
            border-radius: var(--border-radius);
            color: var(--primary-color);
            border: 1px solid #e9ecef;
            transition: var(--transition);
        }
        
        .pagination .page-link:hover {
            background-color: var(--primary-color);
            color: var(--white);
            border-color: var(--primary-color);
            transform: translateY(-1px);
        }
        
        .pagination .page-item.active .page-link {
            background-color: var(--primary-color);
            color: var(--white);
            border-color: var(--primary-color);
        }
        
        /* 提示消息样式 */
        .alert {
            border-radius: var(--border-radius);
            padding: 1rem 1.25rem;
            margin-bottom: 1.5rem;
            border: none;
            box-shadow: var(--shadow-sm);
            display: flex;
            align-items: center;
            gap: 0.75rem;
            animation: slideIn 0.3s ease-out;
        }
        
        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .alert i {
            font-size: 1.25rem;
        }
        
        .alert-success {
            background-color: rgba(28, 200, 138, 0.1);
            color: var(--success-color);
            border-left: 4px solid var(--success-color);
        }
        
        .alert-danger {
            background-color: rgba(231, 74, 59, 0.1);
            color: var(--danger-color);
            border-left: 4px solid var(--danger-color);
        }
        
        /* 模态框样式 */
        .modal-content {
            border-radius: var(--border-radius);
            border: none;
            box-shadow: var(--shadow-lg);
            overflow: hidden;
        }
        
        .modal-header {
            padding: 1.25rem 1.5rem;
            background-color: var(--white);
            border-bottom: 1px solid #e9ecef;
        }
        
        .modal-title {
            font-weight: 600;
            font-size: 1.25rem;
            color: var(--text-color);
        }
        
        .modal-body {
            padding: 1.5rem;
        }
        
        .modal-footer {
            padding: 1.25rem 1.5rem;
            background-color: var(--bg-light);
            border-top: 1px solid #e9ecef;
        }
        
        /* 空数据提示 */
        .empty-state {
            text-align: center;
            padding: 4rem 2rem;
            color: var(--text-muted);
        }
        
        .empty-state i {
            font-size: 4rem;
            margin-bottom: 1rem;
            opacity: 0.3;
        }
        
        .empty-state h3 {
            margin-bottom: 0.5rem;
            color: var(--text-color);
        }
        
        /* 响应式设计 */
        @media (max-width: 1200px) {
            .card-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 1rem;
            }
            
            .search-filter {
                width: 100%;
            }
        }
        
        @media (max-width: 768px) {
            .table-responsive {
                display: block;
                width: 100%;
                overflow-x: auto;
            }
            
            .filter-select {
                flex-direction: column;
                width: 100%;
                align-items: stretch;
            }
            
            .btn-group {
                display: flex;
                flex-direction: column;
                gap: 0.5rem;
            }
            
            .btn-group .btn {
                margin-right: 0;
                width: 100%;
            }
        }
        
        /* 骨架屏加载动画 */
        .skeleton {
            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
            background-size: 200% 100%;
            animation: skeleton-loading 1.5s infinite;
        }
        
        @keyframes skeleton-loading {
            0% {
                background-position: 200% 0;
            }
            100% {
                background-position: -200% 0;
            }
        }
        
        /* 卡片悬停效果 */
        .hover-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .hover-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-lg);
        }
    </style>
</head>
<body>
    <!-- 头部导航 -->
    <header>
        <div class="container">
            <h1><i class="fa fa-users"></i>用户管理系统</h1>
        </div>
    </header>

    <!-- 主内容区 -->
    <main>
        <div class="container">
            <!-- 消息提示 -->
            <div th:if="${param.success != null}" class="alert alert-success" role="alert">
                <i class="fa fa-check-circle"></i>
                <span th:text="${param.success}"></span>
            </div>
            
            <div th:if="${param.error != null}" class="alert alert-danger" role="alert">
                <i class="fa fa-exclamation-circle"></i>
                <span th:text="${param.error}"></span>
            </div>

            <!-- 用户管理卡片 -->
            <div class="card hover-card">
                <div class="card-header">
                    <h2>用户列表</h2>
                    <div class="search-filter">
                        <div class="search-input">
                            <i class="fa fa-search"></i>
                            <input type="text" id="searchInput" placeholder="搜索用户名或邮箱...">
                        </div>
                        <div class="filter-select">
                            <select id="statusFilter">
                                <option value="all">所有状态</option>
                                <option value="1">已启用</option>
                                <option value="0">已禁用</option>
                            </select>
                            <button class="btn btn-primary" onclick="window.location.reload()">
                                <i class="fa fa-refresh"></i> 刷新
                            </button>
                        </div>
                    </div>
                </div>
                
                <div class="card-body">
                    <div th:if="${users.isEmpty()}" class="empty-state">
                        <i class="fa fa-user-o"></i>
                        <h3>暂无用户数据</h3>
                        <p>当前系统中还没有任何用户，请等待用户注册或手动添加用户。</p>
                    </div>
                    
                    <div th:unless="${users.isEmpty()}" class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>用户名</th>
                                    <th>邮箱</th>
                                    <th>姓名</th>
                                    <th>电话</th>
                                    <th>状态</th>
                                    <th>注册时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="userTableBody">
                                <tr th:each="user : ${users}" class="fade-in" th:style="'animation-delay: ' + (${userStat.index} * 0.1) + 's'">
                                    <td th:text="${user.id}"></td>
                                    <td th:text="${user.username}"></td>
                                    <td th:text="${user.email}"></td>
                                    <td th:text="${user.realName}"></td>
                                    <td th:text="${user.phone}"></td>
                                    <td>
                                        <span th:class="${user.status == 1 ? 'status-badge status-active' : 'status-badge status-inactive'}">
                                            <i th:class="${user.status == 1 ? 'fa fa-check-circle' : 'fa fa-times-circle'}"></i> 
                                            <span th:text="${user.status == 1 ? '已启用' : '已禁用'}"></span>
                                        </span>
                                    </td>
                                    <td th:text="${#temporals.format(user.createTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
                                    <td>
                                        <div class="btn-group">
                                            <!-- 状态切换按钮 -->
                                            <form th:action="@{/user/updateStatus}" method="post" style="display: inline;">
                                                <input type="hidden" name="userId" th:value="${user.id}">
                                                <input type="hidden" name="status" th:value="${user.status == 1 ? 0 : 1}">
                                                <button type="submit" class="btn" th:classappend="${user.status == 1 ? 'btn-danger' : 'btn-success'}">
                                                    <i th:class="${user.status == 1 ? 'fa fa-ban' : 'fa fa-check-circle'}"></i> 
                                                    <span th:text="${user.status == 1 ? '禁用' : '启用'}"></span>
                                                </button>
                                            </form>
                                            
                                            <!-- 删除按钮 -->
                                            <button type="button" class="btn btn-danger" 
                                                    th:attr="data-id='${user.id}', data-username='${user.username}'" 
                                                    onclick="openDeleteModal(this)">
                                                <i class="fa fa-trash"></i> 删除
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- 分页控件 -->
            <nav th:unless="${users.isEmpty()}" aria-label="Page navigation">
                <ul class="pagination">
                    <li class="page-item disabled">
                        <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
                    </li>
                    <li class="page-item active"><a class="page-link" href="#">1</a></li>
                    <li class="page-item">
                        <a class="page-link" href="#" aria-disabled="true">下一页</a>
                    </li>
                </ul>
            </nav>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white py-4 border-top">
        <div class="container text-center text-muted">
            <p>&copy; 2023 AI面试助手 - 用户管理系统</p>
        </div>
    </footer>

    <!-- 删除确认模态框 -->
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">
                        <i class="fa fa-exclamation-triangle text-danger"></i> 确认删除
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="p-4 bg-warning bg-opacity-10 rounded-lg">
                        <p class="mb-0">您确定要删除用户 <span id="deleteUsername" class="font-weight-bold text-danger"></span> 吗？</p>
                        <p class="mt-2 text-sm text-muted">此操作无法撤销，删除后用户数据将无法恢复。</p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fa fa-times"></i> 取消
                    </button>
                    <form id="deleteForm" th:action="@{/user/delete}" method="post">
                        <input type="hidden" id="deleteUserId" name="userId">
                        <button type="submit" class="btn btn-danger">
                            <i class="fa fa-trash"></i> 确认删除
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" 
            integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" 
            crossorigin="anonymous"></script>

    <!-- 自定义脚本 -->
    <script>
        // 初始化淡入动画样式
        const style = document.createElement('style');
        style.textContent = `
            @keyframes fadeIn {
                from {
                    opacity: 0;
                    transform: translateY(20px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }
            
            .fade-in {
                animation: fadeIn 0.5s ease-out forwards;
                opacity: 0;
            }
        `;
        document.head.appendChild(style);

        // 打开删除模态框
        function openDeleteModal(button) {
            const userId = button.getAttribute('data-id');
            const username = button.getAttribute('data-username');
            
            document.getElementById('deleteUserId').value = userId;
            document.getElementById('deleteUsername').textContent = username;
            
            const deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));
            deleteModal.show();
        }

        // 搜索和筛选功能
        document.addEventListener('DOMContentLoaded', function() {
            const searchInput = document.getElementById('searchInput');
            const statusFilter = document.getElementById('statusFilter');
            const tableBody = document.getElementById('userTableBody');
            
            // 如果表格存在，则添加搜索和筛选功能
            if (tableBody) {
                const rows = Array.from(tableBody.querySelectorAll('tr'));
                
                function filterRows() {
                    const searchTerm = searchInput.value.toLowerCase();
                    const statusValue = statusFilter.value;
                    
                    rows.forEach(row => {
                        const username = row.querySelector('td:nth-child(2)').textContent.toLowerCase();
                        const email = row.querySelector('td:nth-child(3)').textContent.toLowerCase();
                        const statusCell = row.querySelector('td:nth-child(6) span');
                        const status = statusCell.classList.contains('status-active') ? '1' : '0';
                        
                        const matchesSearch = username.includes(searchTerm) || email.includes(searchTerm);
                        const matchesStatus = statusValue === 'all' || status === statusValue;
                        
                        row.style.display = matchesSearch && matchesStatus ? '' : 'none';
                    });
                }
                
                searchInput.addEventListener('input', filterRows);
                statusFilter.addEventListener('change', filterRows);
            }

            // 添加表格行悬停效果
            document.querySelectorAll('.table-hover tbody tr').forEach(row => {
                row.addEventListener('mouseenter', function() {
                    this.style.transform = 'scale(1.01)';
                    this.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.05)';
                });
                
                row.addEventListener('mouseleave', function() {
                    this.style.transform = 'scale(1)';
                    this.style.boxShadow = 'none';
                });
            });

            // 添加按钮点击效果
            document.querySelectorAll('.btn').forEach(button => {
                button.addEventListener('click', function(e) {
                    // 如果是表单提交按钮，不添加点击效果
                    if (this.closest('form') && this.type === 'submit') {
                        return;
                    }
                    
                    this.style.transform = 'scale(0.97)';
                    setTimeout(() => {
                        this.style.transform = 'scale(1)';
                    }, 150);
                });
            });

            // 自动隐藏成功消息
            const successAlert = document.querySelector('.alert-success');
            if (successAlert) {
                setTimeout(() => {
                    successAlert.style.opacity = '0';
                    successAlert.style.transform = 'translateY(-10px)';
                    successAlert.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
                    
                    setTimeout(() => {
                        successAlert.style.display = 'none';
                    }, 500);
                }, 3000);
            }
        });
    </script>
</body>
</html>